<template>
  <div id="login">

    <van-cell-group inset style="margin-top: 190px;">
      <van-form>

        <van-field class="login-title" label-width="100%" label="系统登录"/>

        <van-field v-model="mobile" label="手机号" name="mobile" placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号' }]"/>
        <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"/>
        <van-field class="login-title" label-width="0%">
          <template #input>
            <van-button class="start-button" type="danger" style="width: 80%;margin: 0 auto" block round size="normal"
                        @click="login">
              <div class="flex-center">
                <img src="@/public/img/wq.png" style="width: 16px;object-fit: contain;margin-right: 10px"  alt=""/>
                <span style="letter-spacing: 8px;font-size: 16px">登录</span>
              </div>
            </van-button>
          </template>
        </van-field>
      </van-form>
    </van-cell-group>

    <loading />
  </div>
</template>
<script>
import Loading from "@/components/Loading";
import { success } from "@/utils/helper";
import router from "@/router";

export default {
  name: "Login",
  data() {
    return {
      mobile: "",
      password: "",
    }
  },
  components: {
    Loading
  },
  created() {

  },
  methods: {
     async login() {
       const {mobile, password} = this;
       const res = await this.$store.dispatch('user/login', {mobile, password});
       if (res['success']) {
         await router.push('/setting');
         return success('登录成功！');
       }
    }
  }
}
</script>

<style>
.login-title .van-cell__title{
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
</style>
